<template>
  <div class="cp-box cp-right" style="margin: 0px 0px 0px 10px">
    <div v-if="!answeringState" class="cp-header">
      <img class="cp-icon" src="../../assets/mini_accident/party01.png" alt="">
      <h4 class="cp-title">当事人</h4>
    </div>
    <div class="cp-content">
      <div v-if="answeringState">
        <el-tabs v-model="activeIndex" @tab-click="handleClick" editable @edit="handleTabsEdit">
          <el-tab-pane
            v-for="(item, index) in personInfoList"
            :key="index"
            :label="item.accidentPersonNum"
            :name="item.index">
            <p class="cp-title">姓名: </p>
            <el-input v-model="item.name" placeholder="请输入" clearable/>
            <p class="cp-title">身份证号: </p>
            <el-input v-model="item.idNumber" placeholder="请输入" clearable/>
            <p class="cp-title">手机号: </p>
            <el-input v-model="item.phoneNumber" placeholder="请输入" clearable/>
            <p class="cp-title">驾驶证号: </p>
            <el-input v-model="item.drivingLicenseNumber" placeholder="请输入" clearable/>
            <p class="cp-title">车牌号: </p>
            <el-input v-model="item.carNumber" placeholder="请输入" clearable/>
            <p class="cp-title">车辆信息: </p>
            <el-input v-model="item.carInfo" placeholder="请输入" clearable/>
            <p class="cp-title">责任认定:</p>
            <el-select v-model="item.dutyId" placeholder="请选择">
              <el-option
                v-for="(item, index) in dutyList"
                :key="item.dutyId"
                :label="item.dutyName"
                :value="item.dutyId">
              </el-option>
            </el-select>
            <p class="cp-title">签名:</p>
            <img class="img-a" :src="item.sign | fileFilter" alt=""/>
          </el-tab-pane>
        </el-tabs>
        <el-button class="btn-a" type="primary" @click="updatePersonInfoList">更新人员信息</el-button>
      </div>
      <ul v-else class="no-data">
        <img class="nd-img" src="../../assets/mini_accident/no_data.png" alt="">
        <span>暂无信息</span>
      </ul>
    </div>
  </div>
</template>

<script>
import CommonFilters from "@/mixins/CommonFilters";
import {getBaseInfo} from "@/api/bureau/miniaccident/miniaccident.js"
// let loading;

export default {
  name: "ExpressCenterLitigant",
  mixins: [CommonFilters],
  data() {
    return {
      activeIndex: "0",
      dutyList: []
    };
  },
  computed: {
    answeringState() {
      return this.$store.state.MiniAccident.answeringState;
    },
    personInfoList() {
      return this.$store.state.AccidentInfo.personInfoList;
    }
  },
  watch: {},
  mounted() {
    let that = this;
    if (that.answeringState) {
      getBaseInfo({}).then(function (res) {
        that.dutyList = res.data.data.dutyList;
      });
    }
  },
  methods: {
    handleClick(tab, event) {
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let _accidentPersonNum = "当事人" + (this.personInfoList.length + 1);
        let _index = (this.personInfoList.length).toString();
        let _personInfo = {
          index: _index,
          sort: _index,
          accidentPersonNum: _accidentPersonNum,
          name: "",
          idNumber: "",
          phoneNumber: "",
          drivingLicenseNumber: "",
          carNumber: "",
          sign: "nosign.png",
          carInfo: "",
          dutyId: ""
        };
        this.personInfoList.push(_personInfo);
        this.activeIndex = _index;
      }
      if (action === 'remove') {
        this.activeIndex = "0";
        let index = parseInt(targetName);
        if (index > 0) {
          this.$delete(this.personInfoList, index);
          let _personInfoList = this.personInfoList;
          for (let index in _personInfoList) {
            this.$set(_personInfoList[index], "index", index.toString());
            this.$set(_personInfoList[index], "sort", index.toString());
            this.$set(_personInfoList[index], "accidentPersonNum", "当事人" + (parseInt(index) + 1));
          }
        }
      }
    },
    updatePersonInfoList() {
      let _name = this.personInfoList[this.activeIndex].name;
      if (_name == "") {
        this.$message({
          message: "请输入姓名",
          type: "error",
          duration: 3000
        });
      } else {
        this.$store.commit('setPersonInfoList', this.personInfoList);
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import 'src/styles/callpolice';

.cp-right {
  width: 260px;
}

.cp-title {
  font-size: 14px;
  margin: 10px 0px 10px 0px;
}

.img-a {
  width: 160px;
  height: 60px;
}

.btn-a {
  margin: 20px 0px 0px 0px;
  width: 100%;
}

.el-select {
  width: 100%;
}

</style>
